<script
  lang="ts"
  setup
>
import { getFileInfo, getFileUrl, getUrlByFilePath } from '~/api/file'
import { addCollectArticle, getExpertWorkInfo, getFloodData, getkpzlList, getPrizeWinningdata } from '~/api/home'

const route = useRoute()
const id = ref('')
const title = ref('')

const dataInit = ref<any>({})

const routePath = computed(() => {
  const result = [{ name: '首页', path: '/' }, { name: route?.query?.backText || '科普资料', type: 'back' }]
  if (route.params.id.split('&')[1]) {
    result.push({ name: `${route.params.id.split('&')[1]}` })
  }
  else if (dataInit.value.title_name) {
    result.push({ name: `${dataInit.value.title_name}` })
  }
  return result
})

const queryParams = reactive<{

  page: {
    rownumber: number
    pageNo: number
  }
  condition?: any[]
  positions?: string
}>(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },

    positions: '首页',
  },

)

async function getPopularScienceMaterialsData() {
  try {
    const res = await getkpzlList(queryParams)
    dataInit.value = res.data[0]
    if (res.data[0].pdf_file_name) {
      if (res.data[0].pdf_file_name.indexOf('http') === 0) {
        const fileType = res.data[0].pdf_file_name.split('.').pop()
        // 判断图片类型
        if (['jpg', 'png', 'gif', 'jepg'].includes(fileType)) {
          dataInit.value.files = [{
            _fileUrl: getFileUrl(res.data[0].pdf_file_name, fileType),
            file_type: 'image',
          }]
          return
        }
        dataInit.value.files = [{
          _fileUrl: getFileUrl(res.data[0].pdf_file_name, fileType),
          file_type: fileType,
        }]
        return
      }
      getFileInfo(res.data[0].pdf_file_name).then((res) => {
        console.log(res)
        const files = res.data.map((item) => {
          if (item.fileurl?.indexOf('http') === 0) {
            item._fileUrl = getFileUrl(item.fileurl)
          }
          else {
            item._fileUrl = getUrlByFilePath(item.fileurl)
          }
          return item
        })
        dataInit.value.files = files
      })
    }
  }
  catch (error) {
    console.error(error)
  }
}
async function getAwardWinningworksData() {
  try {
    const res1 = await getPrizeWinningdata(queryParams)
    dataInit.value = res1.data[0]
    console.log(dataInit.value)
  }
  catch (error) {
    console.error(error)
  }
}
const siderData = ref()
async function getSiderdata() {
  const paramss = {
    page: {
      rownumber: 10,
      pageNo: 1,
    },
    condition: [{
      colName: 'column_recommendation',
      ruleType: 'eq',
      value: '是',
    }],
    order: [{
      colName: 'release_time',
      orderType: 'desc', // asc升序 desc降序
    }],

    positions: '首页',
  }
  let res2
  console.log('infoType', route.params.id.split('&')[1])

  if (!route.params.id.split('&')[1]) {
    res2 = await getkpzlList(paramss)
  }
  else {
    if (route.params.id.split('&')[1] === '资料') {
      res2 = await getkpzlList(paramss)
    }
    else if (route.params.id.split('&')[1] === '获奖作品') {
      res2 = await getPrizeWinningdata(paramss)
    }
    else if (route.params.id.split('&')[1] === '专家作品') {
      res2 = await getExpertWorkInfo(paramss)
    }
  }
  siderData.value = res2?.data
}
function change(itemdata: any) {
  dataInit.value = itemdata
}
async function getExpertwork() {
  try {
    const res = await getExpertWorkInfo(queryParams)
    console.log(res)

    if (res.state === 'SUCCESS') {
      dataInit.value = res.data[0]
    }
  }
  catch (error) {
    console.log(error)
  }
}

onMounted(() => {
  console.log('route222', route)

  const arr = route.params.id.split('&')
  console.log(arr[1] === '1')

  id.value = arr[0]
  queryParams.condition = [{ colName: 'id', ruleType: 'eq', value: id.value }]

  if (arr[1] === route.params.id.split('&')[1] || arr[1] === '推荐') {
    title.value = route.params.id.split('&')[1]
    getPopularScienceMaterialsData()
  }
  else if (arr[1] === '获奖作品') {
    title.value = '获奖作品'
    getAwardWinningworksData()
  }
  else if (arr[1] === '专家作品') {
    getExpertwork()
  }

  getSiderdata()

  // getData(route.params.id)
})

const router = useRouter()
const { collectArticleMap } = storeToRefs(useUserStore())
function backhis() {
  router.back()
}
</script>

<template>
  <div class="bg-[url('/img/index.png')] bg-#F7F9FD bg-no-repeat">
    <PublicSearch type="科普资料" />
    <PublicSearchDialog type="科普资料" />
    <div class="px-40">
      <div class="bg-#fff">
        <CommonPageContainer :title="title" :path="routePath">
          <div class="mt-20px flex justify-between">
            <div class="mr-24px flex-1 rounded-tl bg-#F7F9FD px-40px py-26px">
              <div class="w-full flex items-center">
                <div
                  class="ml-[-50px] h-40px w-40px flex cursor-pointer items-center justify-center"
                  style="border-radius: 6px;
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);" @click="backhis"
                >
                  <div
                    style="width: 18px;
                                        height: 18px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        border-radius:50%;
                                        background-color: rgba(255,255,255,1);"
                  >
                    <span style="color:#0E9472;margin-left: -2px;">
                      <i class="i-ri-arrow-left-s-line" />
                    </span>
                  </div>
                </div>
                <div class="ml-14px" text="20px #0E9472">
                  科普资料
                </div>
              </div>
              <!-- <div v-if="dataInit.contents">
                <div v-if="dataInit.title_name" class="flex flex-wrap items-center pb-12px pt-24px" text="32px #101010">
                  <span>{{ dataInit.title_name }}</span>
                </div>
                <div v-html="addControlsList(dataInit.contents)" />
              </div> -->
              <div
                v-if="Array.isArray(dataInit?.files) && dataInit.files.length"
                class="w-full flex flex-wrap items-center"
              >
                <div v-if="dataInit.title_name" class="flex flex-wrap items-center pb-12px pt-24px" text="32px #101010">
                  <span>{{ dataInit.title_name }}</span>
                </div>
                <div v-for="(item, index) in dataInit.files" :key="index" class="w-full flex items-center">
                  <div class="w-full py-20px">
                    <PdfView v-if="item.file_type === 'pdf'" :url="item._fileUrl" />
                    <video
                      v-else-if="['mp4', 'mov', 'avi', 'flv', 'webm', 'wmv', 'mkv'].includes(item.file_type)"
                      class="mx-auto my-20px max-h-800px w-auto" controlsList="nodownload" controls
                      :src="dataInit.pdf_file_name"
                    />
                    <el-image v-else-if="item.file_type === 'image'" :src="item._fileUrl" />
                    <PPTXViewer v-else :src="item._fileUrl" />
                  </div>
                  <!-- <div>
                  {{ item.src_name }}【{{ item.file_type }}】

                  </div> -->
                </div>
              </div>
              <div v-else-if="dataInit && dataInit.title_name">
                <div class="flex flex-wrap items-center pb-12px pt-24px" text="32px #101010">
                  <span>{{ dataInit.title_name }}</span>
                  <ClientOnly>
                    <TextToSpeak
                      :text="`${dataInit.title_name}${getTextFromHtml(dataInit.contents)}`" :fixed="false"
                      font-size="20px"
                    />
                  </ClientOnly>
                </div>
                <div class="pb-24px" text="16px #666">
                  <div class="flex items-center">
                    <span class="mr-20px">{{ dataInit.author }}</span>
                    <span>
                      {{ dataInit.release_time }}
                    </span>
                  </div>
                </div>
                <div v-html="addControlsList(dataInit.contents)" />
              </div>
              <div
                v-if="dataInit && dataInit.uid" class="flex items-center justify-center pb-46px pt-65px"
                text="16px #101010"
              >
                <div
                  class="mr-14px h-42px w-100px flex cursor-pointer items-center justify-center bg-white"
                  @click="changeArticleCollect(dataInit.uid)"
                >
                  <!-- <img class="pr-12px" src="/img/black_heart.png" alt=""> -->
                  <i
                    class="i-carbon:favorite-filled mr-12px inline-block text-20px"
                    :class="{ 'text-red': collectArticleMap[dataInit.uid], 'text-#555': !collectArticleMap[dataInit.uid] }"
                  />
                  <span>{{ collectArticleMap?.[dataInit.uid] ? '已收藏' : '收藏' }}</span>
                </div>
                <div class="h-42px w-100px flex cursor-pointer items-center justify-center bg-white" @click="copyUrl">
                  <img class="pr-12px" src="/img/share.png" alt="">
                  分享
                </div>
              </div>
              <CommentSection
                v-if="dataInit?.uid && dataInit.enable_comments === '是'" :uid="dataInit.uid"
                :title="dataInit.title_name"
              />
            </div>
            <div v-if="siderData && siderData.length" class="min-w-200px w-19%">
              <div>
                <div
                  class="h-40px flex items-center rounded-tl rounded-tr px-10px py-5px"
                  style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                >
                  <img src="/img/tj.png" alt="">
                  <div class="pl-15px" text="#fff 16px">
                    推荐
                  </div>
                </div>
                <div class="rounded-bl rounded-br px-10px py-5px" border="2px solid #50bc8d">
                  <div v-for="item in siderData" :key="item.id" class="cursor-pointer" @click="change(item)">
                    <img :src="item.cover_file_name" alt="" style="width:100%;height: 124px;object-fit: cover;">
                    <div class="cursor-pointer py-10px hover:text-green-500" text="14px">
                      {{ item.title_name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CommonPageContainer>
      </div>
    </div>
  </div>
</template>

<style></style>
